<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>jQuery EasyUI</title>
      <link href="../css/default.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" type="text/css" href="../js/themes/default/easyui.css" />
	<link rel="stylesheet" type="text/css" href="../js/themes/icon.css" />
	<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="../js/jquery.easyui.min-1.1.2.js"></script>
	<script type="text/javascript" src="../js/locale/easyui-lang-zh_CN.js"></script>

	<script>
		$(function(){
			$('#tt').datagrid({
				url: 'datagrid_data2.json',
				title: '用户列表',
				

				fitColumns: true,
				pagination:true,
				columns:[[
					{field:'itemid',title:'Item ID',width:80},
					{field:'productid',title:'Product ID',width:100},
					{field:'listprice',title:'List Price',width:80,align:'right'},
					{field:'unitcost',title:'Unit Cost',width:80,align:'right'},
					{field:'attr1',title:'Attribute',width:50},
					{field:'status',title:'Status',width:60,align:'center'}
				]],
				onHeaderContextMenu: function(e, field){
					e.preventDefault();
					if (!$('#tmenu').length){
						createColumnMenu();
					}
					$('#tmenu').menu('show', {
						left:e.pageX,
						top:e.pageY
					});
				}
			});
		});
		
		function createColumnMenu(){
			var tmenu = $('<div id="tmenu" style="width:auto;"></div>').appendTo('body');
			var fields = $('#tt').datagrid('getColumnFields');
			for(var i=0; i<fields.length; i++){
				$('<div iconCls="icon-ok"/>').html(fields[i]).appendTo(tmenu);
			}
			tmenu.menu({
				onClick: function(item){
					if (item.iconCls=='icon-ok'){
						$('#tt').datagrid('hideColumn', item.text);
						tmenu.menu('setIcon', {
							target: item.target,
							iconCls: 'icon-empty'
						});
					} else {
						$('#tt').datagrid('showColumn', item.text);
						tmenu.menu('setIcon', {
							target: item.target,
							iconCls: 'icon-ok'
						});
					}
				}
			});
		
		}
	</script>
</head>
<body style="width:100%;height:100%;margin:25;padding:0;overflow:hidden">
	<h1>DataGrid - ContextMenu</h1>
	<p>Right click the header of datagrid to show context menu.</p>
	
	<table id="tt">
	</table>
	
</body>
</html>